<template>
    <div>
        <el-button type="primary" @click="add()">添加角色</el-button>
        <el-table :data="tableDate" stripe style="width: 100%;margin-top: 10px;">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-row :class="index == 0 ? 'kop' : ''" v-for="(item, index) in props.row.children" :key="item.id"
                        :gutter="24" style=" display:flex;align-items: center;border-bottom:2px solid #ccc ;">
                        <el-col :span="4">
                            <div class="grid-content bg-purple-dark">
                                <el-tag closable @close="del(props.row, item.id)">
                                    {{ item.authName }}
                                </el-tag>
                            </div>
                        </el-col>
                        <el-col :span="20">
                            <el-row v-for="(item1) in item.children" :key="item1.id" :gutter="24"
                                style="display:flex; align-items: center; border-left:2px solid #ccc ;">
                                <el-col :span="4">
                                    <div class="grid-content bg-purple">
                                        <el-tag closable type="info" @close="del(props.row, item1.id)">
                                            {{ item1.authName }}
                                        </el-tag>
                                    </div>
                                </el-col>

                                <el-col :span="20">
                                    <el-row style="border-left:2px solid #ccc ;">
                                        <el-col :span="20">

                                            <el-tag v-for="item2 in item1.children" :key="item2.id" closable type="warning"
                                                @close="del(props.row, item2.id)">
                                                {{ item2.authName }}
                                            </el-tag>
                                        </el-col>

                                    </el-row>
                                </el-col>


                            </el-row>
                        </el-col>
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column type="index" label="#" width="70" inline>
            </el-table-column>
            <el-table-column prop="roleName" label="角色名称">
            </el-table-column>
            <el-table-column prop="roleDesc" label="角色描述">
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <el-button size="mini" type="warning" icon="el-icon-s-tools" @click="role(scope.row)">分配权限</el-button>
                </template>
            </el-table-column>

        </el-table>


        <!-- 添加 -->
        <el-dialog :title="`${flag == true ? '修改商品' : '添加商品'}`" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="ruleForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="ruleForm.roleDesc"></el-input>
                </el-form-item>

                <el-form-item style="text-align:end">

                    <el-button @click="resetForm('ruleForm')">取消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 分配权限 -->
        <el-dialog title="分配权限" :visible.sync="dialogFormVisible1">
            <el-tree :data="data" default-expand-all show-checkbox node-key="id" ref="tree" :default-checked-keys="keys"
                :props="defaultProps">
            </el-tree>
            <el-row style="text-align:end">
                <el-button @click="cancelDistribution()">取消</el-button>
                <el-button type="primary" @click="distribution()">确定</el-button>
            </el-row>
        </el-dialog>
    </div>
</template>
<script>
import { getRoles, addRoles, rolesEdit, rolesDelete, roleRoles, roleRoleId, rightDelete } from '../untils/api'
export default {
    data() {
        return {
            tableDate: [],
            from: {
                query: '',
                pagenum: 1,
                pagesize: 10
            },
            roles: [],
            rolesId: 0,
            total: 0,
            flag: false,
            editId: '',
            ruleForm: {
                roleName: '',
                roleDesc: '',
            },
            dialogFormVisible: false,
            rules: {
                roleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },

                ],
                roleDesc: [
                    { required: true, message: '请输入角色描述', trigger: 'blur' },

                ]
            },
            // 分配权限
            dialogFormVisible1: false,
            data: [],
            defaultProps: {
                children: 'children',
                label: 'authName'
            },
            keys: []
        }
    },
    methods: {
        //删除权限
        del(row, id) {
            // console.log(row);

            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                rightDelete({ rightId: id, roleId: row.id }).then(res => {
                    console.log(res);
                    row.children = res.data.data
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //分配权限
        cancelDistribution() {//取消
            this.dialogFormVisible1 = false
        },
        distribution() {
            let arr = this.$refs.tree.getCheckedKeys()
            let arr1 = this.$refs.tree.getHalfCheckedKeys()

            roleRoleId({ roleId: this.rolesId, rids: [...arr1, ...arr].join(",") }).then(res => {
                console.log(res);
                this.page();
                // this.dian()
            })

            this.dialogFormVisible1 = false
            

            // console.log(this.data);
        },
        //编辑和删除
        handleEdit(index, row) {
            this.flag = true
            this.dialogFormVisible = true
            this.ruleForm = row
            this.editId = row.id
            // console.log(index, row);
        },
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                rolesDelete(row).then(res => {
                    // console.log(res);
                    this.page()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            // console.log(index, row);
        },
        role(row) {
            // console.log(row);
            this.roles = row
            this.rolesId = row.id
            console.log(this.rolesId);
            this.dialogFormVisible1 = true
            roleRoles().then(res => {
                // console.log(res);
                this.data = res.data.data
                // console.log(this.data);
            })
            this.dian(row.children)
        },
        dian(arr) {
            arr.forEach(item => {
                if (item.children) {
                    this.dian(item.children)
                } else {
                    this.keys.push(item.id)
                }
                return this.keys
            })
        },
        add() {
            this.dialogFormVisible = true
            this.flag = false
            this.editId = ''
            this.ruleForm = {}
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // console.log(this.ruleForm);
                    // console.log(this.editId);
                    if (this.editId) {
                        rolesEdit({ ...this.ruleForm, id: this.editId }).then(res => {
                            // console.log(res);
                            this.page()
                        })
                        this.flag = false
                        // return false
                    } else {
                        addRoles(this.ruleForm).then(res => {
                            // console.log(res);
                            this.page()
                        })
                    }
                    this.dialogFormVisible = false
                    this.$refs[formName].resetFields();

                    return false;
                } else {
                    console.log('error submit!!');
                    return false;
                }

            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        page() {
            getRoles().then(res => {
                console.log(res.data.data);
                this.tableDate = res.data.data
            })
        }
    },
    created() {
        this.page()
    }
}
</script>
<style lang="scss" scoped>
.el-row {

    // margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;

    }
}

.kop {
    border-top: 2px solid #ccc;
}

.hop {
    border-top: 0px;
}

.el-col {
    border-radius: 4px;

}

//   .bg-purple-dark {
//     background: #99a9bf;
//   }
//   .bg-purple {
//     background: #d3dce6;
//   }
//   .bg-purple-light {
//     background: #e5e9f2;
//   }
.grid-content {
    border-radius: 4px;
    min-height: 36px;
    // .el-tag{
    //     margin: 0 10px;
    // }
}

.el-tag {
    margin: 10px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>


